<template>
    <div class="app">
        <!-- 顶部navBar -->
        <NavBar />
        <!-- 商品列表 -->
        <div class="box" v-for="item in $store.state.list" :key="item.id">
            <div>
                <!-- 商品 -->
                <div class="shopInfo">
                    <van-card :title="item.name">
                        <template #price>
                            <div class="red">
                                ￥{{ item.price + '.00' }}
                            </div>
                        </template>
                        <template #thumb>
                            <div class="imgD">
                                <p></p>
                            </div>
                        </template>
                        <template #desc>
                            <div class="hui">{{ item.introduce }}</div>
                        </template>
                    </van-card>
                </div>
                <!-- 分割线 -->
                <van-divider />
            </div>
        </div>
    </div>
</template>

<script>
import NavBar from '../../components/navBar.vue'
export default {
    name: '',
    mixins: [],
    components: { NavBar },
    props: {},
    data() {
        return {
        }
    },
    computed: {},
    watch: {},
    created() { },
    mounted() { },
    methods: {}
}
</script>

<style scoped lang="less">
.box {
    width: 100%;
}

.app {
    background-color: #fafafa;
}

.red {
    color: red;
}

.imgD {
    width: 100%;
    height: 100%;
    background-color: #e5dfd9;
    display: flex;
    justify-content: center;
    align-items: center;
}

.imgD p {
    width: 10px;
    height: 18px;
    border: 3px solid #fdf7f1;
}

.hui {
    margin-top: 20px;
    color: #d3c9c4;
}
</style>
